<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{% block meta_description %}晨光博客 - 分享技术与生活{% endblock %}">
    <title>{% block title %}晨光博客{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    {% block extra_css %}{% endblock %}

    <script>
        // 移动端菜单切换
        document.addEventListener('DOMContentLoaded', function() {
            const menuToggle = document.querySelector('.mobile-menu-toggle');
            if (menuToggle) {
                menuToggle.addEventListener('click', function() {
                    document.querySelector('.header-content').classList.toggle('active');
                });
            }

            // 主题切换
            const themeToggle = document.querySelector('.theme-switcher');
            if (themeToggle) {
                themeToggle.addEventListener('click', function() {
                    document.body.classList.toggle('dark-theme');
                    localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light');
                });
            }

            // 初始化主题
            if (localStorage.getItem('theme') === 'dark') {
                document.body.classList.add('dark-theme');
            }
        });
    </script>
    {% endblock %}
</head>
<body class="{% block body_class %}apple-style{% endblock %}">
    {% block body %}
    {% include 'includes/header.html' %}

    <div class="page-container">
        {% block messages %}
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            <div class="flash-messages">
                {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message }}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        {% endwith %}
        {% endblock %}

        <main class="content">
            {% block content %}{% endblock %}
        </main>
    </div>

    {% include 'includes/footer.html' %}

    {% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    {% endblock %}
    {% endblock %}
</body>
</html>